<template>
  <div
    style="margin-top: 20px;"
    class="chart-wrap"
  >
    <div class="flex">
      <div
        class="flex-1"
        id="chart078"
        style="height:calc(100vh - 220px);margin-right:300px"
      ></div>
      <div class="dataList">
        <div class="top">数据中心概览</div>
        <div
          id="scoller"
          class="scoller"
        >
          <div
            class="bar"
            :style="'transform:translateY('+(currentIndex === 0 ? 0:currentIndex*165)+'px)'"
          ></div>
          <div
            v-for="(item, index) in workerGroupList"
            :key="item"
            class="item"
            :class="{'is-active':currentIndex === index}"
          >
            <!-- <div class="attr">
                        <span>区域：</span>
                        <span>湖南省湘潭市</span>
                      </div> -->
            <div class="attr">
              <span>名称：</span>
              <span>{{ item.name }}</span>
            </div>
            <div class="attr">
              <span>CPU使用率：</span>
              <span>{{ parseInt(item.cpuUsage*100) }}%</span>
            </div>
            <div class="attr">
              <span>内存使用率：</span>
              <span>{{ parseInt(item.memoryUsage*100) }}%</span>
            </div>
            <div class="attr">
              <span>存储使用率：</span>
              <span>{{ get(item,'dataTotal',1) && ((get(item,'dataUsed',0) / get(item,'dataTotal',1))*100).toFixed(1) }}%</span>
            </div>
            <div class="attr">
              <span>系统架构：</span>
              <span>{{ item.architecture }}</span>
            </div>
            <div class="attr">
              <span>等待任务数：</span>
              <span>{{ item.workerWaitingTaskCount }}</span>
            </div>
            <div class="attr">
              <span></span>
              <span><router-link :to="{path:'/scheduler/resource',query:{groupId:item.id}}">查看详情</router-link></span>
            </div>
          </div>
          <!-- <div class="item"></div>
                    <div class="item"></div>
                    <div class="item"></div>
                    <div class="item"></div>
                    <div class="item"></div>
                    <div class="item"></div> -->
        </div>
      </div>
    </div>
    <div
      style="padding-bottom: 20px;padding-right: 20px;"
      class="text-right"
    >
      <el-button
        type="primary"
        class="btn-create"
        @click="createDispatch"
        icon="el-icon-plus"
        v-auth="['scheduling:center:create']"
      >创建调度任务</el-button>
    </div>

    <!-- 认证弹框 -->
    <el-dialog
      title="认证信息"
      v-if="authDialog"
      :visible.sync="authDialog"
      width='auto'
      append-to-body
    >
      <m-popover
        ref="popover"
        ok-text="去认证"
        @ok="_ok"
        @close="close"
      >
        <template slot="content">
          <div
            class="delete-user-model"
            style="padding:40px 25px;"
          >
            <i
              class="el-icon-warning"
              style="margin-right:8px;color:#fe9f0a;font-size: 18px;"
            ></i>
            <span
              class="right"
              style="font-size: 16px;"
            >
              根据工信部实名制规定，为了保障您的资源使用权益，您需要完成认证！
            </span>
          </div>
        </template>
      </m-popover>
    </el-dialog>
  </div>
</template>

<script>
  import mPopover from '@/module/components/popup/popover'
  import { mapActions, mapState } from 'vuex'
  import * as echarts from 'echarts'
  import { random } from '@/module/util/util'
  import bgcenterball02 from './images/bg_centerball01.png'
  import bgcenterball01 from './images/bg_centerball02.png'
  import bgcenterball03 from './images/bg_centerball03.png'
  import bgcenterball04 from './images/bg_centerball04.png'
  import bgcenterball05 from './images/bg_centerball05.png'
  import bgcenterball06 from './images/bg_centerball06.png'
  import bgcenterball07 from './images/bg_centerball07.png'
  import bgcenterball08 from './images/bg_centerball08.png'
  import bgcenterball09 from './images/bg_centerball09.png'
  import bgcenterball10 from './images/bg_centerball10.png'
  let img1 = 'image://' + bgcenterball01
  let img2 = 'image://' + bgcenterball02
  let img3 = 'image://' + bgcenterball03
  let img4 = 'image://' + bgcenterball04
  let img5 = 'image://' + bgcenterball05
  let img6 = 'image://' + bgcenterball06
  let img7 = 'image://' + bgcenterball07
  let img8 = 'image://' + bgcenterball08
  let img9 = 'image://' + bgcenterball09
  let img10 = 'image://' + bgcenterball10
  // let img4 = 'image://'
  // let fontSizeScale = 1
  let list = [
    {
      name: '长沙超算中心',
      value: '200',
      unit: '',
      img: img1
    },
    {
      name: '长沙云谷数据中心',
      value: '140',
      img: img2
    },
    {
      name: '长沙智算中心',
      value: '140',
      img: img3
    },
    {
      name: '长沙大数据中心',
      value: '130',
      img: img4
    },
    {
      name: '湘潭大数据中心',
      value: '130',
      img: img3
    },
    {
      name: '深圳光明中心',
      value: '130',
      img: img5
    },
    {
      name: '东莞石碣中心',
      value: '130',
      img: img6
    },
    {
      name: '东莞旗峰中心',
      value: '130',
      img: img7
    },
    {
      name: '广州南沙中心',
      value: '130',
      img: img8
    }
  ]

  // let links = list.map(item => {
  //   return {
  //     source: list[0].name,
  //     target: item.name,
  //     ignoreForceLayout: false
  //   }
  // })
  // links.push({
  //   source: '长沙大数据中心',
  //   target: '长沙云谷数据中心'
  // })
  // links.push({
  //   source: '长沙大数据中心',
  //   target: '深圳光明中心'
  // })
  // links.push({
  //   source: '深圳光明中心',
  //   target: '东莞旗峰中心'
  // })
  // links.push({
  //   source: '广州南沙中心',
  //   target: '东莞旗峰中心'
  // })
  // links.push({
  //   source: '广州南沙中心',
  //   target: '东莞石碣中心'
  // })
  // links.push({
  //   source: '长沙云谷数据中心',
  //   target: '长沙智算中心'
  // })
  // links.push({
  //   source: '长沙智算中心',
  //   target: '东莞石碣中心'
  // })

  export default {
    data () {
      return {
        random,
        from: 'cs',
        to: '',
        currentIndex: 0,
        dataList: list,
        workerGroupList: [],
        myChart: null,
        authDialog: false
      }
    },
    components: { mPopover },
    computed: {
      ...mapState('user', ['isAuth']),
      seriesData () {
        let list = this.workerGroupList
        let imgs = [img1, img2, img3, img4, img5, img6, img7, img8, img9, img10, img10, img10, img10]
        let data = list.map((item, index) => {
          let size = item.central === 1 ? 220 : (item.name.length <= 6 ? 130 : 160)
          let label = {}
          label = {
            normal: {
              show: true,
              fontSize: 24,
              zindex: 1,
              color: '#fff',
              // textShadowColor: '#ffffff',
              textShadowBlur: 2,
              formatter: (params) => {
                console.log(params)
                return '{name|' + (params.data.name.replace(/(长沙|广州|深圳|东莞|湘潭|湖北)/, ' $1\r\n')) + '}'
              },
              // formatter: (params) => {
              //     console.log(params)
              //     return '{number|' + params.data.value + '}{unit|' + params.data.unit + '}\n{name|' + params.data.name + '}'
              // },
              rich: {
                name: {
                  fontSize: item.central === 1 ? 30 : 20,
                  lineHeight: item.central === 1 ? 30 : 20,
                  align: 'center',
                  fontFamily: 'YouSheBiaoTiHei, YouSheBiaoTiHei-Regular'
                }
              }
            }
          }

          return {
            name: item.name,
            value: size,
            symbol: imgs[index] || img3,
            symbolSize: size || 130,
            draggable: true,
            category: 0,
            label: label
          }
        })
        return data
      },
      links () {
        let links = []
        let list = this.workerGroupList
        // let count = this.workerGroupList - 1
        // list.forEach((e, index) => {
        //   if (index === 0) {
        //     list.forEach((item) => {
        //       links.push({
        //         source: list[index].name,
        //         target: item.name,
        //         ignoreForceLayout: false
        //       })
        //     })
        //   } else {
        //     links.push({
        //       source: e.name,
        //       target: list[index - 1].name,
        //       ignoreForceLayout: false
        //     })
        //     if (index < list.length - 1) {
        //       links.push({
        //         source: e.name,
        //         target: list[index + 1].name,
        //         ignoreForceLayout: false
        //       })
        //     } else {
        //       links.push({
        //         source: e.name,
        //         target: list[1].name,
        //         ignoreForceLayout: false
        //       })
        //     }
        //   }
        // })
        list.forEach((e, index) => {
          if (e.connectedList) {
            let connectedList = e.connectedList.split(',')
            connectedList.forEach(item => {
              links.push({
                source: e.name,
                target: item,
                ignoreForceLayout: false
              })
            })
          }
        })

        return links
      },
      edgeLength () {
        let list = this.workerGroupList
        let count = list.length
        if (count >= 10) {
          return 100
        } else if (count >= 6) {
          return 200
        } else if (count >= 4) {
          return 260
        } else {
          return 320
        }
      },
      chartOption () {
        return {
          // backgroundColor: '#ffffff',
          tooltip: { show: false },
          animationDurationUpdate: 2000,
          animationEasingUpdate: 'quinticInOut',
          series: [
            {
              type: 'graph',
              layout: 'force',
              force: {
                repulsion: 4000,
                edgeLength: this.edgeLength
              },
              // focusNodeAdjacency: true,
              roam: true,
              zoom: 0.8,
              scaleLimit: {
                max: 3,
                min: 0.5
              },
              data: this.seriesData,
              links: this.links,
              lineStyle: {
                width: 10,
                normal: {
                  opacity: 0.9,
                  width: 2,
                  curveness: 0,
                  color: '#524EFF'
                }
              }
            }
          ]
        }
      }
    },
    watch: {
      chartOption: {
        deep: true,
        handler: function (newval) {
          this.myChart.setOption(newval)
        }
      }
    },
    created () {
      this._getList()
    },
    methods: {
      ...mapActions('security', ['getWorkerGroups']),
      createDispatch () {
        console.log('this.isAuth', this.isAuth)

        if (!this.isAuth) {
          this.authDialog = true
        } else {
          this.$router.push({ name: 'scheduler-task-create', query: { from: this.from } })
        }
      },
      _ok () {
        this.$router.push({ name: 'account', query: { isAuth: this.isAuth } })
      },
      close () {
        this.authDialog = false
      },
      _getList () {
        this.getWorkerGroups({ pageSize: 100, pageNo: 1, node: 1 }).then(res => {
          this.workerGroupList = res.totalList.filter(e => e.name !== 'default').sort((a, b) => {
            return b.central - a.central
          })
        }).catch(e => {
        })
      }
    },
    mounted () {
      const myChart = echarts.init(document.getElementById('chart078'))
      myChart.setOption(this.chartOption, true)

      // 节点拖拽固定
      myChart.on('mouseup', function (params) {
        let option = myChart.getOption()
        option.series[0].data[params.dataIndex].x = params.event.offsetX
        option.series[0].data[params.dataIndex].y = params.event.offsetY
        option.series[0].data[params.dataIndex].fixed = true
        myChart.setOption(option)
      })

      let scoller = document.getElementById('scoller')
      // 点击事件
      myChart.on('click', (params) => {
        console.log()
        if (params.dataType === 'node') {
          console.log('点击了:' + params.name.replace('', ''))
          this.currentIndex = params.dataIndex
          this.$nextTick(() => {
            let div = document.getElementById('scoller').getElementsByClassName('is-active')
            scoller.scrollTop = div[0].offsetTop - 100
          })
        }
      })
      this.myChart = myChart
      window.onresize = () => {
        myChart.resize()
      }
    }
  }
</script>

<style lang="scss" scoped>
.chart-wrap {
  background: url(./images/bg_centerball00.png) no-repeat;
  background-size: 100%;
}
.btn-create {
  width: 280px;
  font-size: 20px;
  font-weight: 600;
  background: linear-gradient(270deg, #33317e 0%, #5a58c5);
  border-radius: 4px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  letter-spacing: 1px;
}

.flex {
  position: relative;
}

.dataList {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 280px;
  height: calc(100% - 40px);
  padding: 10px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
  align-items: stretch;

  .scoller {
    position: relative;
    margin-top: 10px;
    height: calc(100% - 40px);
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 5px;
    }
    /* 滚动条滑块 */
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: rgba(0, 0, 0, 0.1);
    }

    .bar {
      position: absolute;
      left: 0;
      top: 0;
      width: 4px;
      background: #33317e;
      height: 155px;
      transition: all 0.5s ease;
    }
  }

  .top {
    background: rgba(51, 49, 126, 0.2);
    border-left: 4px solid rgb(51, 49, 126);
    padding: 2px 10px;
  }

  .item {
    padding: 10px;
    height: 155px;
    background: linear-gradient(90deg, rgba(51, 49, 126, 0.1), rgba(51, 49, 126, 0) 100%);
    border-left: 4px solid rgba(51, 49, 126, 0.3);
    &:not(:last-child) {
      margin-bottom: 10px;
    }
    &.is-active {
      // border-left: 4px solid rgb(51, 49, 126);
      color: #33317e;
    }
    .attr {
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
